<template>
  <view class="category">
    <UgoSearch></UgoSearch>

    <view class="main">
      <view class="menus">
         <view :class="['menus-item',current===index?'active':'']" v-for="(item,index) in menus" :key="item" @click="handleMenuSelect(index)">{{item}}</view>
      </view>
      <view class="content">
          <view class="goods-group" v-for="item1 in goods" :key="item1.cat_id">
            <view class="goods-group-title">{{item1.cat_name}}</view>
            <view class="goods-group-content">
              <navigator v-for="item2 in item1.children" :key="item2.cat_id"
              :url="'/pages/goods_list/goods_list?cid='+item2.cat_id ">
                <u-image width="120rpx" height="120rpx" :src="item2.cat_icon"></u-image>
                <view class="cat-name">{{item2.cat_name}}</view>
              </navigator>
            </view>
          </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
   data(){
     return{
      //  category:[],
       current:0,
       menus:[],
       goods:[]
     }
   },
   onLoad(){
     this.category=[]
    this.getCategory()
   },
  //  computed:{
  //     menus(){
  //       return this.category.map(item=>item.cat_name)
  //     },
  //     goods(){
  //       if(!this.category.length) return []
  //       return this.category[this.current].children
  //     }
  //  },
   methods:{
     async getCategory(){
       this.category=await this.$u.http.get('/categories')
       this.menus=this.category.map(item=>item.cat_name)
       this.goods=this.category[this.current].children
     },
     handleMenuSelect(index){ 
       this.current=index
       this.goods=this.category[this.current].children

     }
   }
}
</script>

<style lang="scss">
.category{
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main{
    flex: 1;
    overflow: hidden;
    display: flex;
    .menus{
      width: 182rpx;
      overflow: auto;
      .menus-item{
        text-align: center;
        height: 74rpx;
        line-height: 74rpx;
        color: #666;
      }
      .active {
        color: $themeColor;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4rpx;
          height: 70%;
          background-color: $themeColor;
        }
      }
    }
    .content{
      flex: 1;
      overflow: auto;
      .goods-group {
        .goods-group-title{
          height: 74rpx;
          text-align: center;
          line-height: 74rpx;

          &::before,
          &::after {
            content: "/";
            margin: 0 10rpx;
            color: #ccc;
          }
        }
        .goods-group-content{
          display: flex;
          flex-wrap: wrap;
          navigator{
            width: 33.33%;
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }
      }

    }
  }
}
</style>